<template>
  <HeaderView />

  <ThreeView />

  <RouterView />
  <!-- <component :is="region" /> -->
</template>

<script setup>
import { ref, onMounted, markRaw } from "vue";
import { RouterView, useRouter } from "vue-router";
import HeaderView from "@/components/header/index.vue";
import ThreeView from "@/components/threeView/index.vue";
import dayjs from "dayjs";
import { getToken } from "@/utils/auth";
import { ElMessage } from "element-plus";
// import { getBuildingES } from "@/api/screen";

// 顶层大楼总能耗统计
const getBuildingStatistics = () => {
  getBuildingES({ baseDay: dayjs().format("YYYY-MM-DD") }).then(res => {
    console.log(res);
  });
};

const router = useRouter();
const getIsToken = () => {
  const token = getToken();
  if(!token) {
    router.replace("/login")
    ElMessage.warning("请先登录!");
  }
}

onMounted(() => {
  getIsToken();

  // getBuildingStatistics();
});
</script>

<style lang="scss">
// .region_menu {
//   position: fixed;
//   top: 95px;
//   left: 50%;
//   z-index: 1;
//   display: flex;
//   align-items: center;
//   transform: translate(-50%, 0);

//   .menu_list {
//     position: relative;
//     display: flex;
//     align-items: center;
//     justify-content: center;
//     width: 120px;
//     height: 54px;
//     margin: 0 5px;
//     font-size: 16px;
//     cursor: pointer;

//     img {
//       width: 100%;
//       height: 100%;
//     }

//     .menu_text {
//       position: absolute;
//       top: 50%;
//       left: 50%;
//       font-size: 16px;
//       line-height: 16px;
//       color: #333;
//       white-space: nowrap;
//       transform: translate(-50%, -50%);

//       &.active {
//         color: #fff;
//       }
//     }
//   }
// }

body {
  width: 100%;
  height: 100%;
  background-image: url("@/assets/images/img_otherbg.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;

  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  outline: none;
}

.el-select {
  .el-select__wrapper {
    .el-select__suffix {
      .el-icon.is-reverse {
        color: var(--main-color);
      }
      // svg {
      //   display: none;
      // }

      // .el-icon {
      //   background-image: url("@/assets/images/ico_down_red.png");
      //   background-repeat: no-repeat;
      //   background-position: center;
      //   background-size: 6px 5px;
      // }
    }

    &.is-focused {
      box-shadow: 0 0 0 1px var(--main-color) inset;
    }
  }
}

.el-tree {
  .el-tree-node {
    .el-tree-node__content {
      .el-icon {
        background-image: url("@/assets/images/ico_down_black.png");
        background-position: center;
        background-repeat: no-repeat;
        background-size: 8px 4px;
        transform: rotate(180deg);

        &.expanded {
          background-image: url("@/assets/images/ico_down_red.png");
        }

        svg {
          display: none;
        }
      }
    }
  }
}

::-webkit-scrollbar {
  width: 5px; /* 设置滚动条的宽度 */
}

::-webkit-scrollbar-thumb {
  background-color: rgba(
    $color: #000000,
    $alpha: 0.2
  ); /* 设置滚动条滑块的颜色 */
  border-radius: 5px; /* 设置滚动条滑块的圆角 */
}

::-webkit-scrollbar-thumb:hover {
  background-color: #555; /* 设置滚动条滑块在悬停时的颜色 */
}

::-webkit-scrollbar-track {
  background-color: rgba($color: #000000, $alpha: 0); /* 设置滚动条背景的颜色 */
}
</style>
